<template>
    <div class="wenshidu_Box">
        <div class="wenshidu_titleBox">
            <div class="titleBox1_l">
                <div class="Title_icon"></div>
                <span class="public_Text">温湿度</span>
            </div>
            <!-- <div class="zhuangtai_box zaixian lixian"></div> -->
            <div class="titleBox1_r" @click="addClose"></div>
            <div>温度: {{wenshiduObj.wendu}}</div>
            <div>湿度: {{wenshiduObj.shidu}}</div>
            <div>PM2.5: {{wenshiduObj.PM2}}</div>
        </div>

    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import { postqueryStatusDbapi } from "@/api/index.js"
    const props = defineProps({
        wenshiduObj: {
            type: Object,
            default: true
        }
    })
    const emit = defineEmits(["clsoewenshudu"])
    const addClose = () => {
        emit("clsoewenshudu")
    }
    const init = async (data) => {
        let tijiaoList = {
            directDid: data.DirectId,
            did: data.Did,
            siid: data.Siid,
            fiids: [16641, 16642, 16450]
        }
        const res = await postqueryStatusDbapi(tijiaoList)
        console.log(res.data.data.data.params.fiids, '温湿度功能状态');
        rtnshujv(res.data.data.data.params.fiids)
        let tijiaolist1 = {
            directDid: data.DirectId,
            did: data.Did,
            siid: 0,
          fiids:[16485]
        }
        const res1 = await postqueryStatusDbapi(tijiaolist1)
        console.log(res1.data.data.data.params.fiids[0].value.online, '温湿度在离线 0 离线 1 在线');
    }
    const wenshiduObj = ref({})
    const rtnshujv = (data) => {
        let aaa = {
            wendu: "",
            shidu: "",
            PM2: ""
        }
        data.forEach(item => {
            console.log(item);
            if (item.fiid == 16450) {
                aaa.PM2 = item.value.pm25
            } else if (item.fiid == 16642) {
                aaa.shidu = item.value.humidity
            } else if (item.fiid == 16641) {
                aaa.wendu = item.value.temp
            }
        })
        wenshiduObj.value = aaa
    }
    watch(
        () => props.wenshiduObj,
        (val) => {
            console.log(val, "监听到了温湿度的变化")
            init(val)
        },
        {
            deep: true,
            immediate: true
        }
    )
</script>
<style scoped lang="less">
    .wenshidu_Box {
        width: 100%;
        height: 100%;
        background: url("@/assets/accessControl/changbeijing.png") no-repeat center;
        background-size: 100% 100%;

        .zaixian {
            background: url("@/assets/ultraviolet/zaixian.png") no-repeat center;
            background-size: 100% 100%;
        }

        .lixian {
            background: url("@/assets/ultraviolet/lixian.png") no-repeat center;
            background-size: 100% 100%;
        }

        .zhuangtai_box {
            width: 160px;
            height: 52px;
        }

        .wenshidu_titleBox {
            width: 808px;
            height: 60px;
            position: absolute;
            left: 50%;
            top: 20px;
            transform: translate(-50%, 0);
            display: flex;
            align-items: center;
            justify-content: space-between;

            .titleBox1_l {
                width: 600px;
                height: 60px;
                display: flex;
                align-items: center;

                .Title_icon {
                    margin-left: 20px;
                    width: 50px;
                    height: 50px;
                    /* background: url("@/assets/wenshidu/tubiao.png") no-repeat center; */
                    /* background-size: 100% 100%; */
                }

                span {
                    margin-left: 20px;
                }
            }

            .titleBox1_r {
                cursor: pointer;
                width: 80px;
                height: 80px;
                background: url("@/assets/PatientInformation/xhao.png") no-repeat center;
                background-size: 100% 100%;
            }
        }
    }
</style>